<template>
  <div class="common-layout">
    <el-container style="height: 100%" class="container-all">
      <!-- <el-aside style="background-color: pink"> -->
      <el-scrollbar
        height="100%"
        style="background: #001529; color: #fff"
        class="container-left"
      >
        <div class="aside-title">
          <h3 v-if="!isCollapse" class="mb-2">民宿预定管理系统</h3>
          <el-icon v-else><House /></el-icon>
        </div>
        <el-menu
          class="el-menu-vertical-demo"
          :collapse="isCollapse"
          @open="handleOpen"
          @close="handleClose"
          background-color="#001529"
          text-color="#fff"
        >
          <el-sub-menu index="系统管理">
            <template #title>
              <el-icon><Setting /></el-icon>
              <span>系统管理</span>
            </template>

            <el-sub-menu index="用户管理">
              <template #title>用户管理</template>
              <el-menu-item index="1-1-1" @click="goto('user')"
                >用户管理</el-menu-item
              >
            </el-sub-menu>
            <el-sub-menu index="房源管理">
              <template #title>房源管理</template>
              <el-menu-item index="1-2-1" @click="goto('homestay')"
                >房源管理</el-menu-item
              >
              <el-menu-item index="1-2-2" @click="goto('hometype')"
                >房源类型管理</el-menu-item
              >
              <el-menu-item index="1-2-3" @click="goto('review')"
                >审核房源</el-menu-item
              >
            </el-sub-menu>
            <el-sub-menu index="订单管理">
              <template #title>订单管理</template>
              <el-menu-item index="1-3-1" @click="goto('order')"
                >订单管理</el-menu-item
              >
            </el-sub-menu>
            <el-sub-menu index="收藏管理">
              <template #title>收藏管理</template>
              <el-menu-item index="1-4-1" @click="goto('collect')"
                >收藏管理</el-menu-item
              >
            </el-sub-menu>
            <el-sub-menu index="评论管理">
              <template #title>评论管理</template>
              <el-menu-item index="1-5-1" @click="goto('comment')"
                >评论管理</el-menu-item
              >
              <el-menu-item index="1-5-2" @click="goto('QandA')"
                >问答管理</el-menu-item
              >
            </el-sub-menu>
            <el-sub-menu index="站内信管理">
              <template #title>站内信管理</template>
              <el-menu-item index="1-6-1" @click="goto('template')"
                >模板管理</el-menu-item
              >
              <el-menu-item index="1-6-2" @click="goto('infoLog')"
                >消息记录</el-menu-item
              >
            </el-sub-menu>

            <!-- <el-menu-item-group>
              <el-menu-item index="1-1" @click="goto('user')"
                >用户管理</el-menu-item
              >
              <el-menu-item index="1-2" @click="goto('homestay')"
                >房源管理</el-menu-item
              >
              <el-menu-item index="1-3" @click="goto('hometype')"
                >房源类型管理</el-menu-item
              >
              <el-menu-item index="1-4" @click="goto('review')"
                >审核房源</el-menu-item
              >
              <el-menu-item index="1-5" @click="goto('order')"
                >订单管理</el-menu-item
              >
              <el-menu-item index="1-6" @click="goto('collect')"
                >收藏管理</el-menu-item
              >
              <el-menu-item index="1-7" @click="goto('comment')"
                >评论管理</el-menu-item
              >
              <el-menu-item index="1-8" @click="goto('QandA')"
                >提问管理</el-menu-item
              >
              <el-menu-item index="1-8">消息模板管理</el-menu-item>
              <el-menu-item index="1-8">消息记录</el-menu-item>
            </el-menu-item-group> -->
          </el-sub-menu>

          <el-sub-menu index="可视化管理">
            <template #title>
              <el-icon><Histogram /></el-icon>
              <span>可视化管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="2-1" @click="goto('visible')"
                >可视化报表</el-menu-item
              >
            </el-menu-item-group>
          </el-sub-menu>

          <el-sub-menu index="个人中心">
            <template #title>
              <el-icon><User /></el-icon>
              <span>个人中心</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="3-1" @click="goto('center')"
                >个人中心</el-menu-item
              >
            </el-menu-item-group>
          </el-sub-menu>
        </el-menu>
        <!-- </el-aside> -->
      </el-scrollbar>
      <el-container class="right-contain">
        <el-header
          style="
            height: 70px;
            display: flex;
            align-items: center;
            justify-content: space-between;
          "
        >
          <div style="display: flex; align-items: center">
            <div style="margin-right: 20px">
              <el-icon
                v-if="isCollapse == true"
                size="24"
                @click="isCollapse = false"
                ><Expand
              /></el-icon>
              <el-icon v-else size="24" @click="isCollapse = true"
                ><Fold
              /></el-icon>
            </div>
            <el-breadcrumb separator="/">
              <el-breadcrumb-item :to="{ path: '/' }">{{
                mainMenu
              }}</el-breadcrumb-item>
              <el-breadcrumb-item
                ><a href="/">{{ sonMenu }}</a></el-breadcrumb-item
              >
            </el-breadcrumb>
          </div>

          <div>
            <el-dropdown>
              <el-avatar
                :src="'http://127.0.0.1:8090/public/avator/' + avator"
              />
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="goto('center')"
                    >个人中心</el-dropdown-item
                  >
                  <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </el-header>
        <el-main style="background-color: whitesmoke" class="routerView">
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
  House,
  Fold,
  Expand,
  Histogram,
  User,
} from "@element-plus/icons-vue";
import router from "../../router";
import { main } from "@popperjs/core";
import { ElMessage, ElMessageBox } from "element-plus";
const isCollapse = ref(true);
const handleOpen = (key: string, keyPath: string[]) => {
  if (keyPath.length == 1) {
    mainMenu.value = key;
  } else {
    mainMenu.value = keyPath[0];
    sonMenu.value = keyPath[1];
  }
};
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};

const avator = JSON.parse(sessionStorage.getItem("userInfo")).avator;

const mainMenu = ref<string>("系统管理");
const sonMenu = ref<string>("用户管理");

// 路由跳转
const goto = (str: string) => {
  if (str === "user") {
    sonMenu.value = "用户管理";
    router.push({ path: "userManage" });
  } else if (str === "homestay") {
    sonMenu.value = "房源管理";
    router.push({ path: "homestayManage" });
  } else if (str === "hometype") {
    sonMenu.value = "房源管理";
    router.push({ path: "homeTypeManage" });
  } else if (str === "review") {
    sonMenu.value = "审核房源";
    router.push({ path: "reviewManage" });
  } else if (str === "order") {
    sonMenu.value = "订单管理";
    router.push({ path: "orderManage" });
  } else if (str === "comment") {
    sonMenu.value = "评论管理";
    router.push({ path: "commentManage" });
  } else if (str === "QandA") {
    sonMenu.value = "提问管理";
    router.push({ path: "QandAManage" });
  } else if (str === "template") {
    sonMenu.value = "模板管理";
    router.push({ path: "TempManage" });
  } else if (str === "infoLog") {
    sonMenu.value = "消息记录";
    router.push({ path: "infoLog" });
  } else if (str === "collect") {
    sonMenu.value = "收藏管理";
    router.push({ path: "collectManage" });
  } else if (str === "center") {
    sonMenu.value = "个人中心";
    router.push({ path: "center" });
  } else if (str === "visible") {
    sonMenu.value = "个人中心";
    router.push({ path: "visible" });
  }
};

//退出登录
const logout = () => {
  ElMessageBox.confirm("确认退出登录吗?", "系统提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      sessionStorage.removeItem("id");
      sessionStorage.removeItem("userInfo");
      router.push("/login");
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消退出登录",
      });
    });
};
</script>

<style scoped lang="scss">
.common-layout {
  height: 100%;

  .container-all {
    display: flex;
    width: 100%;

    .right-contain {
      flex: 1;
      overflow: hidden;
    }
  }

  .aside-title {
    width: 100%;
    height: 50px;
    line-height: 50px;
    text-align: center;
  }
  .el-menu-vertical-demo {
    // width: 200px;
    min-height: 100%;
  }
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 220px;
  }
}
.right-contain {
  overflow: hidden;
}
.routerView {
  overflow: hidden;
}
</style>
